<template>
  <div class="commom-card">
    <CommonCard title="今日交易用户数" value="81,014">
      <template
        ><div
          id="today-users-chart"
          :style="{ width: '100%', height: '100%' }"
        ></div
      ></template>
      <template v-slot:footer>
        <span>退货率</span>
        <span class="emphasis">5.14%</span>
      </template>
    </CommonCard>
  </div>
</template>
<script>
import commomCardMixin from "../../mixins/commomCardMixin";
export default {
  mixins: [commomCardMixin],
  mounted() {
    const chartDom = document.getElementById("today-users-chart");
    //init(DOM元素，样式，渲染模式（svg）)
    const chart = this.$echarts.init(chartDom, { rederer: "svg" });
    chart.setOption({
      color:['#3398db'],
      series:[{
        type:'bar',
        data:[410,82,200,334,390,330,220,150,82,200,134,290,330,150],
        barWidth:'60%'
      }],
      xAxis:{
        type:'category',
        data:['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00'],
        show:false
      },
      yAxis:{
        show:false
      },
      grid:{
        top:0,
        left:15,
        bottom:0,
        right:0,
      }
    });
  },
};
</script>
<style scoped lang="scss">
</style>